<template>
<div>
    <!-- 提示软件的可用名称 -->
    <div>
        <p>软件名称,多名称以英文逗号分割</p>
        <el-input style="width:200px;height:30px" v-model="name" placeholder="请输入"></el-input>
    </div>
    <div>
        <p>url地址，可选项</p>
        <el-input style="width:200px;height:30px" v-model="url" placeholder="请输入"></el-input>
    </div>



    <!-- 系统中的信息 -->
    <div style="margin-top:50px" v-for="(v,app_index) in app_system" :key="app_index">
        <!--  系统选项 --> 
        <el-dropdown @command="choice_system">
            <span class="el-dropdown-link">
                {{v.name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item v-for="(vu,index) in Object.keys(system)" 
                        :key="index" :command="{name:vu,index:app_index}">
                        {{vu}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <!-- 版本选项 --> 
        <div v-if="v.name != '请选择系统'">
            <el-dropdown @command="choice_bb">
                <span class="el-dropdown-link">
                    {{v.bb}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="(bb,index) in system[v.name]" 
                            :key="index" :command="{bb,index:app_index}">
                            {{bb}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>


        <div v-if="v.bb != '请选择系统版本'">
            <el-dropdown @command="choice_digit">
                <span class="el-dropdown-link">
                    {{v.digit}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :command="{digit:'32',index:app_index}">32</el-dropdown-item>
                        <el-dropdown-item :command="{digit:'64',index:app_index}">64</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>


        <!-- 类型选项 不选择默认为data -->
        <el-dropdown @command="choice_type">
            <span class="el-dropdown-link">
                {{v.type}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :command="{type:'html',index:app_index}">html</el-dropdown-item>
                    <el-dropdown-item :command="{type:'json',index:app_index}">json</el-dropdown-item>
                    <el-dropdown-item :command="{type:'data',index:app_index}">data</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <!-- 类型对应的选项 -->

        <div v-if="v.type === 'html'">
            <!-- 让用户输入正则 -->
          
            <div>
                <p style="margin-bottom:0">匹配正则</p>
                <el-input style="height:30px;width:300px" v-model="v.regular.choice"></el-input>
            </div>

            <div>
                <p style="margin-bottom:0">净化正则</p>
                <el-input style="height:30px;width:300px" v-model="v.regular.purify"></el-input>
            </div>

            <div>
                <p style="margin-bottom:0">匹配下标</p>
                <el-input style="height:30px;width:300px" v-model="v.regular.subscript"></el-input>
            </div>


            <div>
                <p style="margin-bottom:0">匹配后合并</p>
                <el-input style="height:30px;width:300px" v-model="v.regular.merge"></el-input>
            </div>
        </div>

        <div v-if="v.type === 'json'">
            <div>
                <p style="margin-bottom:0">json的具体某一项</p>
                <el-input style="height:30px;width:300px" v-model="v.json"></el-input>
            </div>
        </div>

    </div>
    
    <!-- 添加软件的系统 可多添加，但不可同一个系统-->
    <el-button style="margin-top:50px" @click="addSystem" type="primary">添加系统</el-button>
    <el-button style="margin-top:50px" @click="create_config" type="primary">生成配置</el-button>


    <!-- 选择系统的版本 -->

    <!-- 选择软件的匹配类型 -->

    <!-- 如果是html类型 需要填写正则 -->

    <!-- 如果类型为json 需要选择json的字段 -->

    <!-- 以上都需要自定义选择提供请求头 -->

    <!-- 以上都可以选择是否共享 -->

</div>
</template>


<script>
export default {
    data() {return{
        system:{
            all:["无须选择"],
            window:["windows11","windows10","windows8","windows7","windowsxp"],
            mac:["mac"],
            linux:["linux"],
        },
        // 软件名称
        name:"",
        // 软件链接
        url:"",
        app_system:[]

    }},
    methods:{
        //添加系统
        addSystem(){
            this.app_system.push({
                // 系统名称
                name:"请选择系统",
                // 系统版本
                bb:"请选择系统版本",
                digit:"请选择系统位数",
                // 类型 html json data
                type:"请选择数据类型",
                json:"",
                regular:{
                    // 匹配
                    choice:"",
                    // 净化
                    purify:"",
                    // 合并
                    merge:"",
                    // 匹配到的下标，默认为0
                    subscript:"0"
                }
            })
        },
        // 选择系统
        choice_system({name,index}){
            console.log([name,index])
            this.app_system[index].name = name;
        },
        // 选择数据类型
        choice_type({type,index}){
            console.log(type,index)
            this.app_system[index].type = type;
        },
        // 选择系统版本
        choice_bb({bb,index}){
            console.log(bb,index)
            this.app_system[index].bb = bb;
        },
        // 选择系统位数
        choice_digit({digit,index}){
            console.log(digit,index)
            this.app_system[index].digit = digit;
        },


        create_config(){
            if(this.name){
                alert("软件名称不可为空")
                return
            }
            let app = {};
            app.system = {}
            app.name = this.name.split(",")
            this.url && (app.url = this.url)
            this.app_system.map(sys=>{
                // 默认是windows
                if(!sys.name || sys.name === "all"){
                    app.system.windows = {
                        // 类型
                        type:sys.type,
                        regular:sys
                        // 正则
                        // json
                    }

                }
            })







        }
    }
}
</script>


<style scoped>
    input{
        height: 30px !important;
    }



</style>